<template>
	<div class="addVideo">
		<el-dialog
			:title="`${type == 'add' ? '新增' : '编辑'}管理员信息`"
			:visible.sync="dialogVisible"
			width="600px"
			:modal-append-to-body="false"
			:close-on-click-modal="false"
			custom-class="custom-dialog"
		>
			<el-form
				ref="forms"
				size="small"
				:model="forms"
				:rules="rules"
				label-width="140px"
				label-position="right"
			>
				<el-form-item label="账号类型" prop="is_manager">
					<el-radio-group v-model="forms.is_manager">
						<el-radio label="1">管理员</el-radio>
						<el-radio label="2">教练</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="用户名：" prop="username">
					<el-input
						v-model="forms.username"
						placeholder="请输入用户名"
						clearable
						maxlength="20"
						show-word-limit
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="手机号：" prop="userphone">
					<el-input
						v-model="forms.userphone"
						placeholder="请输入手机号"
						clearable
						maxlength="11"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="密码：" prop="userpass">
					<el-input
						v-model="forms.userpass"
						placeholder="请输入密码"
						clearable
						type="password"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="真实姓名：" prop="realname">
					<el-input
						v-model="forms.realname"
						placeholder="请输入真实姓名"
						clearable
						maxlength="30"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item prop="head_img" label="头像：">
					<UploadImage ref="upload" :max-size="1" :files="fileList" @files="onUpload" />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button style="margin-right: 5px" @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveVideos">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import { mapGetters } from 'vuex'
	import Editor from '@/components/Editor'
	import { edit } from '@/api/user-manager.js'
	import UploadImage from '@/components/UploadHttp/UploadImage.vue'
	import { uploadFunc } from '@/utils/upload.js'
	export default {
		name: 'add-daily',
		components: { Editor, UploadImage },
		data() {
			return {
				dialogVisible: false,
				disabled: false,
				forms: {
					title: '',
					content: ''
				},
				rules: {
					is_manager: [{ required: true, message: '请选择', trigger: 'change' }],
					memtype: [{ required: true, message: '请选择企业类型', trigger: 'change' }],
					username: [{ required: true, message: '请输入用户名', trigger: 'change' }],
					userphone: [{ required: true, message: '请输入手机号', trigger: 'change' }],
					userpass: [{ required: true, message: '请输入密码', trigger: 'change' }],
					realname: [{ required: true, message: '请输入真实姓名', trigger: 'change' }]
				},
				type: 'add',
				fileList: [],
				fileList2: [],
				info: {}
			}
		},
		computed: {
			...mapGetters(['token', 'userInfo'])
		},
		methods: {
			async initData(type, info) {
				this.type = type
				this.forms = {
					id: info.id || '',
					is_manager: info.is_manager || '1', // 1管理员 2普通职员
					department_id: info.department_id || '1000',
					username: info.username || '',
					userphone: info.userphone || '',
					userpass: info.userpass || '',
					head_img: info.head_img || '',
					realname: info.realname || ''
				}
				this.fileList = info.head_img ? [{ url: info.head_img }] : []
				this.dialogVisible = true
				this.$nextTick(() => {
					this.$refs.forms.clearValidate()
				})
			},
			async getDetailInfo(info_id) {
				const loading = this.$loading({
					lock: true,
					text: '数据加载中,请稍等~',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				try {
					const res = await getInfo({ id: info_id })
					this.info = res.data
					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			},
			// 保存
			async saveVideos() {
				this.$refs.forms.validate(async valid => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: '数据提交中~'
						})
						// 判断有没有需要上传的文件
						const uploadList = this.fileList.filter(item => {
							return item.status === 'ready' && item.raw
						})
						if (!uploadList.length) {
							this.saveData(loading)
						} else {
							const upload = uploadFunc(uploadList)
							Promise.all([upload]).then(res => {
								this.saveData(loading)
							})
						}
					}
				})
			},
			// 保存更新进度数据
			async saveData(loading) {
				const { forms, fileList, fileList2 } = this
				forms.head_img = fileList.length ? fileList.map(item => item.url).join(',') : ''
				edit(forms).then(
					res => {
						this.$message.success(`管理员${this.type === 'add' ? '新增' : '修改'}成功！`)
						this.dialogVisible = false
						this.$parent.loadData()
						loading.close()
					},
					err => {
						loading.close()
					}
				)
			},
			onUpload(list) {
				this.fileList = list
				this.forms.head_img = list.length ? list[0].url : ''
			},
			onUpload2(list) {
				this.fileList2 = list
				this.forms.zizhi = list.length ? list[0].url : ''
			}
		}
	}
</script>
<style lang="scss" scoped>
	.addVideo {
		::v-deep {
			.el-dialog .el-dialog__body {
				padding-bottom: 20px;
			}
		}
		.box-wrap {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
	}
</style>
